$(document).ready(function () {
  var aa = 0;
  var size = $(".banner_select>ul li").size(); //5
  var img_size = $(".banner_wrap>ul li").size(); //5
  for (var i = 0; i <= size - 1; i++) {
    $(".banner_select>ul li")[i].id = i;
    $(".banner_wrap>ul li")[i].id = i;
  }

  $(".banner_select>ul li").hover(function () {
    aa = this.id;
    $(".J_trigger_line").css({
      left: this.id * 195,
    });
    $(".banner_wrap>ul li")
      .eq(this.id)
      .addClass("on")
      .siblings(this)
      .removeClass("on");
    $(".banner_wrap>ul li").eq(this.id).fadeIn(500).siblings(this).fadeOut(500);
  });

  function move() {
    $(".J_trigger_line").css({
      left: aa * 195,
    });
    $(".banner_wrap>ul li")
      .eq(aa)
      .addClass("on")
      .siblings(aa)
      .removeClass("on");
    $(".banner_wrap>ul li").eq(aa).fadeIn(500).siblings(aa).fadeOut(500);
  }

  var t = setInterval(lunbo, 1500);

  function lunbo() {
    if (aa == img_size) {
      aa = 0;
    }
    move();
    aa++;
  }
  $(".banner_wrap").hover(
    function () {
      clearInterval(t);
    },
    function () {
      t = setInterval(lunbo, 1500);
    }
  );
  $(".left").click(function () {
    if (aa <= 1) {
      aa = 6;
    }
    aa -= 2;
    move();
    aa++;
  });
  $(".right").click(function () {
    if (aa == 5) {
      aa = 0;
    }
    aa++;
    aa--;
    move();
    aa++;
  });
});

var aaa = document.querySelectorAll(".pt1");
// 用for循环遍历所有按钮
for (i = 0; i < aaa.length; i++) {
  aaa[i].onmouseover = function () {
    for (let i = 0; i < aaa.length; i++) {
      // 清除所有样式
      aaa[i].style.color = "";
    }
    // 设置当前样式
    this.style.color = "red";
  };
}

var kong = "";
var divX = document.querySelector(".f122");

// ========================================================
var binnn01=data. clothesData.slice(0,6);
for (let i = 0; i < binnn01.length; i++) {
  kong += `
  <div> 
  <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn01[i].goodsurls.nowurl}" alt=""></a>
  <span>${binnn01[i].goodstitle}</span>
  <p>${binnn01[i].goodszprice}</p>
  </div>
  `;
}
divX.innerHTML = kong;

// 切换
// 获取按钮
var anNiu = document.querySelectorAll(".pt");
// console.log(anNiu);
// 获取盒子
// console.log(he);

for (var i = 0; i < anNiu.length; i++) {
  anNiu[i].index = i;

  anNiu[i].onmouseover = function () {
    for (let j = 0; j < anNiu.length; j++) {
      anNiu[j].style.border = "";
    }
    this.style.border = "1px solid red";

    divX.innerHTML = "";
    kong = "";

    if (this.index == 0) {
      var binnn01=data. clothesData.slice(0,6);
      for (let i = 0; i < binnn01.length; i++) {
        kong += `
        <div> 
        <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn01[i].goodsurls.nowurl}" alt=""></a>
        <span>${binnn01[i].goodstitle}</span>
        <p>${binnn01[i].goodszprice}</p>
        </div>
        `;
      }
      divX.innerHTML = kong;
    } else if (this.index == 1) {
      var binnn01=data. clothesData.slice(6,8);
      for (let i = 0; i < binnn01.length; i++) {
        kong += `
        <div> 
        <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn01[i].goodsurls.nowurl}" alt=""></a>
        <span>${binnn01[i].goodstitle}</span>
        <p>${binnn01[i].goodszprice}</p>
        </div>
        `;
      }
      divX.innerHTML = kong;
    } else if (this.index == 2) {
      var binnn01=data. clothesData.slice(8,10);
      for (let i = 0; i < binnn01.length; i++) {
        kong += `
        <div> 
        <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn01[i].goodsurls.nowurl}" alt=""></a>
        <span>${binnn01[i].goodstitle}</span>
        <p>${binnn01[i].goodszprice}</p>
        </div>
        `;
      }
      divX.innerHTML = kong;
    } else if (this.index == 3) {
      var binnn01=data. clothesData.slice(10,12);
      for (let i = 0; i < binnn01.length; i++) {
        kong += `
        <div> 
        <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn01[i].goodsurls.nowurl}" alt=""></a>
        <span>${binnn01[i].goodstitle}</span>
        <p>${binnn01[i].goodszprice}</p>
        </div>
        `;
      }
      divX.innerHTML = kong;
    } else if ((this.index = 4)) {
      var binnn01=data. clothesData.slice(6,7);
      for (let i = 0; i < binnn01.length; i++) {
        kong += `
        <div> 
        <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn01[i].goodsurls.nowurl}" alt=""></a>
        <span>${binnn01[i].goodstitle}</span>
        <p>${binnn01[i].goodszprice}</p>
        </div>
        `;
      }
      divX.innerHTML = kong;
    }
  };
}
var divTwo=document.querySelector('.f122two');
// 服装城男装数据
var binnn02=data. clothesData.slice(13,14);
for (let i = 0; i < binnn02.length; i++) {
  kong += `
  <div> 
  <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn02[i].goodsurls.nowurl}" alt=""></a>
  <span>${binnn02[i].goodstitle}</span>
  <p>${binnn02[i].goodszprice}</p>
  </div>
  `;
}
divTwo.innerHTML = kong;
// 男装数据渲染
var anNiutwo = document.querySelectorAll(".pttwo");
for (var i = 0; i < anNiutwo.length; i++) {
    anNiutwo[i].index = i;
  
    anNiutwo[i].onmouseover = function () {
      console.log(this.index);
      for (let j = 0; j < anNiutwo.length; j++) {
        anNiutwo[j].style.border = "";
      }
      this.style.border = "1px solid red";

      divTwo.innerHTML = "";
      kong = "";

      if (this.index == 0) {
        var binnn02=data. clothesData.slice(13,17);
        for (let i = 0; i < binnn02.length; i++) {
          kong += `
          <div> 
          <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn02[i].goodsurls.nowurl}" alt=""></a>
          <span>${binnn02[i].goodstitle}</span>
          <p>${binnn02[i].goodszprice}</p>
          </div>
          `;
        }
        divTwo.innerHTML = kong;
      } else if (this.index == 1) {
        var binnn02=data. clothesData.slice(5,9);
        for (let i = 0; i < binnn02.length; i++) {
          kong += `
          <div> 
          <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn02[i].goodsurls.nowurl}" alt=""></a>
          <span>${binnn02[i].goodstitle}</span>
          <p>${binnn02[i].goodszprice}</p>
          </div>
          `;
        }
        divTwo.innerHTML = kong;
      } else if (this.index == 2) {
        var binnn02=data. clothesData.slice(12,15);
        for (let i = 0; i < binnn02.length; i++) {
          kong += `
          <div> 
          <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn02[i].goodsurls.nowurl}" alt=""></a>
          <span>${binnn02[i].goodstitle}</span>
          <p>${binnn02[i].goodszprice}</p>
          </div>
          `;
        }
        divTwo.innerHTML = kong;
      } 
    };
  }

//   服饰配件


//   配件渲染
var peiOne = document.querySelectorAll(".ptthree");
var peiTwo = document.querySelector('.f122three');


for (var i = 0; i < peiOne.length; i++) {
    peiOne[i].index = i;
  
    peiOne[i].onmouseover = function () {
      console.log(this.index);
      for (let j = 0; j < peiOne.length; j++) {
        peiOne[j].style.border = "";
      }
      this.style.border = "1px solid red";
  
      peiTwo.innerHTML = "";
      kong = "";
  
      if (this.index == 0) {
        var binnn03=data.clothesData.slice(12,15);
        for (let i = 0; i < binnn03.length; i++) {
          kong += `
          <div> 
          <a href="goods.html?shopName=clothesData#${data.clothesData[i].goodsid}"><img src="${binnn03[i].goodsurls.nowurl}" alt=""></a>
          <span>${binnn03[i].goodstitle}</span>
          <p>${binnn03[i].goodszprice}</p>
          </div>
          `;
        }
        peiTwo.innerHTML = kong;
      } else if (this.index == 1) {
        var binnn03=data. clothesData.slice(7,13);
        for (let i = 0; i < binnn03.length; i++) {
          kong += `
          <div> 
          <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn03[i].goodsurls.nowurl}" alt=""></a>
          <span>${binnn03[i].goodstitle}</span>
          <p>${binnn03[i].goodszprice}</p>
          </div>
          `;
        }
        peiTwo.innerHTML = kong;
      } else if (this.index == 2) {
        var binnn03=data. clothesData.slice(12,17);
        for (let i = 0; i < binnn03.length; i++) {
          kong += `
          <div> 
          <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn03[i].goodsurls.nowurl}" alt=""></a>
          <span>${binnn03[i].goodstitle}</span>
          <p>${binnn03[i].goodszprice}</p>
          </div>
          `;
        }
        peiTwo.innerHTML = kong;
      } 
    };
  }
// 内衣数据
var nFour=[{
    img:'  img: "../img/Fzc/n9.jpg",',
    text:'迷瞳盒装女士内裤莫代尔透气少女三角裤夏季性感低腰无痕大码裤头 5条盒装 莫代尔面料 小内裤 窄边三角裤',
    jiage:'$100'
}];
var nShuju = [
    {
      img: "../img/Fzc/n1.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
        img: "../img/Fzc/n2.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/n3.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/n4.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/n5.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/n6.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/n7.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/n8.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
  ];
  var peier=[{
    img: "../img/Fzc/n9.jpg",
    text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
    jiage: "$15.9",
  }];
// 内衣渲染
var ptFour = document.querySelectorAll(".ptfour");
console.log(ptFour);
var neiYifour=document.querySelector('.neiyifour');
console.log(neiYifour);

// neiYifour.innerHTML = "";
    


for (var i = 0; i < ptFour.length; i++) {
    ptFour[i].index = i;
  
    ptFour[i].onmouseover = function () {
      console.log(this.index);
      for (let j = 0; j < ptFour.length; j++) {
        ptFour[j].style.border = "";
      }
      this.style.border = "1px solid red";
  
      neiYifour.innerHTML = "";
      kong = "";
  
      if (this.index == 0) {
        peier.forEach(function (v, i) {
          kong += `
                <div>
                <a href=""><img src="${peier[i].img}" alt=""></a>
                <span>${peier[i].text}</span>
                <p>${peier[i].jiage}</p>
                </div>
                `;
        });
        neiYifour.innerHTML = kong;
      } else if (this.index == 2) {
        peier.forEach(function (v, i) {
          kong += `
                <div>
                <a href=""><img src="${peier[i].img}" alt=""></a>
                <span>${peier[i].text}</span>
                <p>${peier[i].jiage}</p>
                </div>
                `;
        });
        neiYifour.innerHTML = kong;
      } else if (this.index == 1) {
        var binnn03=data. clothesData.slice(17,18);
        for (let i = 0; i < binnn03.length; i++) {
          kong += `
          <div> 
          <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn03[i].goodsurls.nowurl}" alt=""></a>
          <span>${binnn03[i].goodstitle}</span>
          <p>${binnn03[i].goodszprice}</p>
          </div>
          `;
        }
        neiYifour.innerHTML = kong;
      } 
    };
  }
//   户外运动数据
var hWsj = [
    {
      img: "../img/Fzc/h3.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
        img: "../img/Fzc/h4.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/h5.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/h6.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/h7.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/h8.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    },
    {
      img: "../img/Fzc/h9.jpg",
      text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
      jiage: "$15.9",
    }
  ];
  var hwsj2=[{
    img: "../img/Fzc/h100.jpg",
    text: "小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔",
    jiage: "$15.9",
  }];

//   户外运动渲染
var hwan = document.querySelectorAll(".huwaian");
console.log(hwan);
var hwhe=document.querySelector('.huwai');
console.log(hwhe);

for (var i = 0; i < hwan.length; i++) {
    hwan[i].index = i;
  
    hwan[i].onmouseover = function () {
      console.log(this.index);
      for (let j = 0; j < hwan.length; j++) {
        hwan[j].style.border = "";
      }
      this.style.border = "1px solid red";
  
      hwhe.innerHTML = "";
      kong = "";
  
      if (this.index == 0) {
        hWsj.forEach(function (v, i) {
          kong += `
              <div>
              <a href=""><img src="${hWsj[i].img}" alt=""></a>
              <span>${hWsj[i].text}</span>
              <p>${hWsj[i].jiage}</p>
              </div>
              `;
        });
        hwhe.innerHTML = kong;
      } else if (this.index == 2) {
        hwsj2.forEach(function (v, i) {
          kong += `
                <div>
                <a href=""><img src="${hwsj2[i].img}" alt=""></a>
                <span>${hwsj2[i].text}</span>
                <p>${hwsj2[i].jiage}</p>
                </div>
                `;
        });
        hwhe.innerHTML = kong;
      } else if (this.index == 1) {
        var binnn03=data. clothesData.slice(12,17);
        for (let i = 0; i < binnn03.length; i++) {
          kong += `
          <div> 
          <a href="goods.html?shopName=clothesData#${data. clothesData[i].goodsid}"><img src="${binnn03[i].goodsurls.nowurl}" alt=""></a>
          <span>${binnn03[i].goodstitle}</span>
          <p>${binnn03[i].goodszprice}</p>
          </div>
          `;
        }
        hwhe.innerHTML = kong;
      } 
    };
  }







//   楼层导航
  //  提前获取元素的偏移值
  let arr = [];
$('.content').each(function (index, item) {
    arr.push($(item).offset().top)
})

console.log(arr);

//  绑定滚动事件
$(window).on('scroll', function () {
    // 获取滚动值
    let sctop = $(window).scrollTop();
    console.log(sctop);
    
    //  判断头部内容出现
    if(sctop >= 900){         
       $('.header').css({top: 0})
        $('.navbar').css({width: 36, height: 340})
    }else{
        $('.header').css({top: -150})
        $('.navbar').css({width: 0, height: 0})
    }


    //  判断 进入视野区域的元素对应的索引值
    arr.forEach((item, index) => {
        if (item - sctop <= 200 && item >= sctop) {
            $('.list li').eq(index).addClass('active').siblings().removeClass('active')
        }
    })
})


  // 底部轮播
  var _index5 = 0;
  $("#four_flash .but_right img").click(function() {
      _index5++;
      var len = $(".flashBg ul.mobile li").length;
      if (_index5 + 5 > len) {
          $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
      }
      $("#four_flash .flashBg ul.mobile").stop().animate({
          left: -_index5 * 326
      }, 1000);
  });


  $("#four_flash .but_left img").click(function() {
      if (_index5 == 0) {
          $("ul.mobile").prepend($("ul.mobile").html());
          $("ul.mobile").css("left", "-1380px");
          _index5 = 6
      }
      _index5--;
      $("#four_flash .flashBg ul.mobile").stop().animate({
          left: -_index5 * 326
      }, 1000);
  });


